<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园二手市场 - 发布商品</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #66BB6A;
            --light-gray: #F5F5F5;
            --text-color: #212121;
            --sub-text: #757575;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-gray);
            min-height: 100vh;
            padding-bottom: 60px;
            position: relative;
        }

        .header {
            background-color: #4CAF50;
            color: white;
            padding: 1rem;
            text-align: center;
            position: relative;
        }

        .back-btn {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            text-decoration: none;
            font-size: 1.2rem;
        }

        .content {
            padding: 1rem;
            max-width: 600px;
            margin: 0 auto;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }

        .form-group input, 
        .form-group textarea, 
        .form-group select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        .form-group textarea {
            height: 100px;
            resize: vertical;
        }

        .image-preview {
            width: 100%;
            height: 200px;
            border: 1px dashed #ddd;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
        }

        .image-preview img {
            max-width: 100%;
            max-height: 100%;
            display: none;
        }

        .image-preview.has-image img {
            display: block;
        }

        .image-preview p {
            color: #999;
        }

        .publish-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            margin-top: 1rem;
        }

        .publish-btn:hover {
            background-color: var(--secondary-color);
        }

        .nav-bar {
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            padding: 0.5rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            margin: 0 auto;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 12px 12px 0 0;
            z-index: 102;
        }

        .nav-bar a {
            color: var(--sub-text);
            text-decoration: none;
            padding: 0.5rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.8rem;
            transition: color 0.3s;
            position: relative;
        }

        .nav-bar a.active {
            color: var(--primary-color);
        }

        .nav-bar a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px;
        }

        .nav-icon {
            width: 24px;
            height: 24px;
            position: relative;
            margin-bottom: 0.2rem;
        }

        .home-icon::before { content: "🏠"; }
        .products-icon::before { content: "📦"; }
        .publish-icon::before { content: "✏️"; }
        .news-icon::before { content: "💬"; }
        .account-icon::before { content: "👤"; }
    </style>
</head>
<body>
    <header class="header">
        <a href="products.html" class="back-btn">←</a>
        <h1>发布商品</h1>
    </header>

    <div class="content">
        <form id="publish-form">
            <div class="form-group">
                <label for="title">商品标题</label>
                <input type="text" id="title" name="title" required placeholder="请输入商品标题">
            </div>
            
            <div class="form-group">
                <label for="description">商品描述</label>
                <textarea id="description" name="description" required placeholder="请输入商品详细描述"></textarea>
            </div>
            
            <div class="form-group">
                <label for="price">价格 (元)</label>
                <input type="number" id="price" name="price" required min="0" step="0.01" placeholder="请输入商品价格">
            </div>
            
            <div class="form-group">
                <label for="category">商品分类</label>
                <select id="category" name="category" required>
                    <option value="">请选择分类</option>
                    <option value="书籍">书籍</option>
                    <option value="电子产品">电子产品</option>
                    <option value="家电">家电</option>
                    <option value="交通工具">交通工具</option>
                    <option value="生活">生活</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>商品图片</label>
                <div class="image-preview" id="image-preview">
                    <p>点击选择图片或拖拽图片到此处</p>
                    <img id="preview-image" src="#" alt="商品图片预览">
                </div>
                <input type="file" id="image" name="image" accept="image/*" style="display: none;">
                <button type="button" id="select-image-btn" class="publish-btn" style="margin-top: 0.5rem;">选择图片</button>
            </div>
            
            <button type="submit" class="publish-btn">发布商品</button>
        </form>
    </div>

    <nav class="nav-bar">
        <a href="index.html">
            <div class="nav-icon home-icon"></div>
            首页
        </a>
        <a href="products.html">
            <div class="nav-icon products-icon"></div>
            商品
        </a>
        <a href="publish.html" class="active">
            <div class="nav-icon publish-icon"></div>
            发布
        </a>
        <a href="news.html">
            <div class="nav-icon news-icon"></div>
            消息
        </a>
        <a href="account.html">
            <div class="nav-icon account-icon"></div>
            我的
        </a>
    </nav>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const currentUser = JSON.parse(localStorage.getItem('currentUser'));
            if (!currentUser) {
                window.location.href = 'login.html';
            }
            const form = document.getElementById('publish-form');
            const imagePreview = document.getElementById('image-preview');
            const previewImage = document.getElementById('preview-image');
            const selectImageBtn = document.getElementById('select-image-btn');
            const imageInput = document.getElementById('image');

            // 点击选择图片按钮触发文件选择
            selectImageBtn.addEventListener('click', function () {
                imageInput.click();
            });

            // 处理图片选择
            imageInput.addEventListener('change', function (e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (event) {
                        previewImage.src = event.target.result;
                        imagePreview.classList.add('has-image');
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 拖放图片功能
            imagePreview.addEventListener('dragover', function (e) {
                e.preventDefault();
                imagePreview.classList.add('dragover');
            });

            imagePreview.addEventListener('dragleave', function () {
                imagePreview.classList.remove('dragover');
            });

            imagePreview.addEventListener('drop', function (e) {
                e.preventDefault();
                imagePreview.classList.remove('dragover');

                const file = e.dataTransfer.files[0];
                if (file && file.type.startsWith('image/')) {
                    imageInput.files = e.dataTransfer.files;
                    const reader = new FileReader();
                    reader.onload = function (event) {
                        previewImage.src = event.target.result;
                        imagePreview.classList.add('has-image');
                    };
                    reader.readAsDataURL(file);
                }
            });

            // 表单提交
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const title = document.getElementById('title').value.trim();
                const description = document.getElementById('description').value.trim();
                const price = parseFloat(document.getElementById('price').value);
                const category = document.getElementById('category').value;
                const imageFile = imageInput.files[0];

                if (!title || !description || isNaN(price) || !category || !imageFile) {
                    alert('请填写所有必填字段！');
                    return;
                }

                // 读取图片为Base64
                const reader = new FileReader();
                reader.onload = function (event) {
                    const imageData = event.target.result;
                    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
                    const newProduct = {
                        id: Date.now(),
                        title: title,
                        description: description,
                        price: price,
                        image: imageData,
                        category: category,
                        userId: currentUser.id,
                        userName:currentUser.name, 
                        date: new Date().toISOString() 
                    };

                    let products = JSON.parse(localStorage.getItem('products')) || [];
                    products.unshift(newProduct);

                    // 保存回localStorage
                    localStorage.setItem('products', JSON.stringify(products));

                    // 触发商品添加事件
                    window.dispatchEvent(new Event('productAdded'));

                    // 提示用户并跳转回商品页面
                    alert('商品发布成功！');
                    window.location.href = 'products.html';
                };

                reader.readAsDataURL(imageFile);
            });
        });
    </script>
</body>
</html>